import React, { useState, useEffect, useRef } from 'react';
import { connect } from 'umi'
import { Modal, Form, notification } from 'antd';
import FormCondition from '@/components/FormCondition';
import { lottery_status } from '@/common/contact'
import SelectTable from './../SelectTable'
const ModelForm = (props) => {
  const { visible = false, onClose, loading, dispatch, reload } = props;
  const { show = false, details = {} } = visible;
  const { goodsId, lotteryInfo = {}, prizeList = [] } = details;
  const [joinTypeSetting, setJoinTypeSetting] = useState('')
  const { joinType, id, status } = lotteryInfo
  const modelRef = useRef(null)
  const [form] = Form.useForm();
  useEffect(() => {
    const { joinType } = lotteryInfo
    if (joinType) {
      setJoinTypeSetting(joinType)
    }

  }, [lotteryInfo])
  useEffect(() => {
    if (!show) {
      setJoinTypeSetting('')
    }
  }, [show])
  // 确认提交
  const handleUpAudit = () => {
    form.validateFields().then(val => {
      const getPrizeData = modelRef.current.getPrizeList()
      let flag = getPrizeData.reduce((item, val) => {
        if (!item) {
          return item
        }
        else if (!val.prizeName || !val.prizeStock) {
          return false
        }
        else return item
      }, true)
      if (!flag || getPrizeData.length === 0) {
        return notification.warning({
          message: '温馨提示',
          description: `请将奖品设置完整`,
        });
      }
      else {
        dispatch({
          type: 'liveStreaming/fakeSaveGoodsLottery',
          payload: {
            goodsId,
            id,
            ...val,
            prizeList: getPrizeData
          },
          callback: () => {
            onClose();
            reload && reload()
          }
        })
      }
    })
  }

  const formItems = [
    {
      label: `抽奖名称`,
      name: 'lotteryName',
      disabled: id && status !== '0'
    },
    {
      label: `参与类型`,
      name: 'joinType',
      type: 'select',
      disabled: id && status !== '0',
      select: lottery_status,
      onChange: (e) => {
        console.log(e)
        setJoinTypeSetting(e)
      }
    },
    {
      label: '评论词',
      name: 'appointComment',
      disabled: id && status !== '0',
      visible: joinTypeSetting === 'appointComment'
    },
    {
      type: 'noForm',
      formItem: (
        <SelectTable
          disabled={id && status !== '0'}
          defaultDataList={prizeList.map(item => {
            return {
              ...item, id: item.prizeGoodsId
            }
          })}
          ref={modelRef}
        ></SelectTable>
      ),
    },

    {
      label: '重复抽奖',
      name: 'repeatFlag',
      disabled: id && status !== '0',
      type: 'radio',
      select: {
        0: '否',
        1: '是',
      }
    },
    {
      label: '展示中奖人数',
      name: 'showWinUserFlag',
      disabled: id && status !== '0',
      type: 'radio',
      select: {
        0: '否',
        1: '是',
      }
    }
  ];

  const modalProps = {
    title: `添加抽奖`,
    width: 950,
    visible: show,
    maskClosable: true,
    destroyOnClose: true,
    zIndex: 1001,
    confirmLoading: loading,
  };

  return (
    <Modal {...modalProps} onCancel={onClose} onOk={handleUpAudit}>
      <FormCondition formItemLayouts={{
        labelCol: {
          sm: { span: 3 },
        },
        wrapperCol: {
          sm: { span: 20 },
        },
      }} form={form} initialValues={{ repeatFlag: '0', showWinUserFlag: '0', ...lotteryInfo }} formItems={formItems}></FormCondition>
    </Modal>
  );
};

export default connect(({ loading }) => ({
  loading: loading.effects['liveStreaming/fakeSaveGoodsLottery']
}))(ModelForm);;

